.container{
    border: 1px solid #194e54;
    height: 100px;
    width: 160px;
    position: relative;
}
.inner-container{
    background-color: rgba(12,88,92,0.4);
    height: 100%;
    width: 100%;
    overflow: auto;
}
.inner-container::-webkit-scrollbar{
    display: none;
}
.customClass1{
    padding: 2px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
.itemClass{
    padding-left: 5px;
    box-sizing: border-box;
    height: 30px;
    line-height: 30px;
}
.class1-rect{
    position:absolute;
    width: 5px;
    height: 5px;
    background-color: #039293;
}
.class1-rect-1,.class1-rect-2{
    top: -2px;
}
.class1-rect-1,.class1-rect-3{
    left: -2px;
}
.class1-rect-2,.class1-rect-4{
    right: -2px;
}
.class1-rect-3,
.class1-rect-4{
    bottom:-2px;
}

.customClass2{
    border: 1px solid #039293;
}
.customClass2>.inner-container{
    background-color: rgba(12,88,92,0.4);
}
.itemCustomClass2{

    cursor: pointer;
}
.itemCustomClass2:hover{
    background-color: rgba(12,88,92,0.6);

}
.class2-line{
    height: 100%;
    width: 3px;
    background-color: #0d4e52;
    position: absolute;
    top: 0;
}
.class2-line-1{
    left: -7px;
}
.class2-line-2{
    right: -7px;
}

.class2-rect{
    height: 3px;
    width: 3px;
    background-color: #d7bd46;
    position:absolute;
}
.class2-rect-1{
    left: -7px;
    top: 0;
}
.class2-rect-2{
    left: -7px;
    bottom: 0;
}
.class2-rect-3{
    right: -7px;
    top: 50%;
    height: 5px;
}

.customClass3{
    border: 1px solid #0c585c;
    border-bottom-color:#039293;
}
.class3-line{
    width: 110%;
    height: 3px;
    position: absolute;
    top: -3px;
    left: -5%;
    background-color: #039293;
}

.class4-line-top,.class4-line-left{
    position: absolute;
}
.class4-line-top{
    background-color: #0a6167;
    top: -5px;
    height: 1px;
    width: 98%;
}

.class4-line-left{
    background-color: #0a6167;
    left: -5px;
    height:98%;
    width: 1px;
    top: 0;
}

.class4-rect{
    position: absolute;
    width: 3px;
    height: 3px;
    background-color: #03eaf6;
}
.class4-rect-1,.class4-rect-2{
    top: -5px;
}
.class4-rect-1,.class4-rect-3{
    left: -5px;
}
.class4-rect-2{
    right: -2px;
}
.class4-rect-3{
    bottom: -2px;
}


.class5-rect{
    position: absolute;
    width: 3px;
    height: 5px;
    background-color: #039293;
}
.class5-rect-1,.class5-rect-2{
    top: -5px;
}
.class5-rect-1,.class5-rect-3{
    left: -5px;
}
.class5-rect-2,.class5-rect-4{
    right: -5px;
}
.class5-rect-3,.class5-rect-4{
    bottom: -5px;
}

.customClass6{
    border: 1px solid #0c585c;
}
.class6-line{
    width: 101%;
    height: 5px;
    position: absolute;
    top: -8px;
    left: -1px;
    background-color: #039293;
}
.class6-rect{
    height: 5px;
    width: 2px;
    background-color: #000;
    position: absolute;
    top: -8px;
}
.class6-rect-1{
    left: 2px;
}
.class6-rect-2{
    right: 2px;
}

.class7-line-top,.class7-line-bottom{
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #0c585c;
    position: absolute;
}
.class7-line-top{
    top: -5px;
}
.class7-line-bottom{
    bottom: -5px;
}
.class7-short-line{
    width: 10px;
    height: 1px;
    background-color: #0c585c;
    position: absolute;
}
.class7-short-line-1,.class7-short-line-2{
    top: -9px;
}
.class7-short-line-3,.class7-short-line-4{
    bottom: -9px;
}
.class7-short-line-1,.class7-short-line-3{
    left: -9px;
}
.class7-short-line-2,.class7-short-line-4{
    right: -9px;
}
.class7-short-line-1{
    transform: rotate(45deg);
}
.class7-short-line-2{
    transform: rotate(-45deg);
}
.class7-short-line-3{
    transform: rotate(135deg);
}
.class7-short-line-4{
    transform: rotate(-135deg);
}
.class7-circle{
    width: 3px;
    height: 3px;
    position:absolute;
    background-color: #00f0ff;
}
.class7-circle-1,.class7-circle-2{
    top: -15px;
}
.class7-circle-3,.class7-circle-4{
    bottom: -15px;
}
.class7-circle-1,.class7-circle-3{
    left: -10px;
}
.class7-circle-2,.class7-circle-4{
    right: -10px;
}
.customClass8{
    background: rgba(12,88,92,0.5);
    padding: 3px;
    border: 0;
    box-sizing: border-box;
}
.customClass8>.inner-container{
    background-color: transparent;
    border: 1px solid #0c585c;
}

.customClass9{
    border-top-width: 2px;
    border-bottom-width: 2px;
}
.class9-rect{
    position: absolute;
    width: 5px;
    height: 3px;
    background-color: #04dfea;
}
.class9-rect-1,.class9-rect-2{
    top: -3px;
}
.class9-rect-1,.class9-rect-3{
    left: -5px;
}
.class9-rect-2,.class9-rect-4{
    right: -5px;
}
.class9-rect-3,.class9-rect-4{
    bottom: -3px;
}
.customClass10{
    border: 0;
    background-color: transparent;
    border: 1px solid #0c585c;
    border-top: 0;
    border-right: 0;
}
.customClass10>.inner-container{
    background-color: transparent;
    background-image: url(./img/10.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.class10-right-border{
    height: 96%;
    width: 1px;
    background-color: #0c585c;
    top: 5px;
    right: 0;
    position: absolute;
}
.class10-bottom-line{
    width: 100%;
    height: 1px;
    background-color: #0c585c;
    position: absolute;
    bottom: -5px;
}
.class10-rect-1,.class10-rect-2{
    width:3px;
    height:3px;
    background-color: #04dee9;
    position: absolute;
    bottom: -6px;
}
.class10-rect-1{
    left: -3px;
}
.class10-rect-2{
    right: -3px;
}